<!-- eslint-disable no-useless-escape -->
<template>
  <div id="codeView">
    <el-input v-model="value" />
    <code-viewer v-if="show" :source="source" :show-code="false"></code-viewer>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'App',
  data() {
    return {
      show: false,
      source: '',
      value: '',
      result: [
        {
          sensors: [
            {
              sensorID: 1298,
              sensorTypeId: 1,
              routerId: 'K74054643',
              deviceSerial: 'K74054643',
              alias: '视频1',
              deviceName: '视频1',
              channelNo: null,
              control: null,
              lat: 29.97518760253659,
              hdAddress: null,
              liveAddress:
                'https://open.ys7.com/v3/openlive/K74054643_1_2.m3u8?expire=1712041798&id=622811357774884864&t=a904422edba057ad7938969ec40a230db1bfc73ea0ca4af500e8914bd7b59671&ev=100',
              rtmp: null,
              rtmpHd: null,
              status: null,
              beginTime: null,
              endTime: null,
              group: 0,
              exception: 0,
              long: 121.87029182910919,
              tian_di: true,
            },
            {
              sensorID: 1299,
              sensorTypeId: 1,
              routerId: 'K74054657',
              deviceSerial: 'K74054657',
              alias: '视频2',
              deviceName: '视频2',
              channelNo: null,
              control: null,
              lat: 29.97010857295839,
              hdAddress: null,
              liveAddress:
                'https://open.ys7.com/v3/openlive/K74054657_1_2.m3u8?expire=1712041799&id=622811358445969408&t=b2045bb66711020fdf65f059efce61eb5e05fa3abaa67cede16181d4f5c7558c&ev=100',
              rtmp: null,
              rtmpHd: null,
              status: null,
              beginTime: null,
              endTime: null,
              group: 0,
              exception: 0,
              long: 121.86729311943056,
              tian_di: true,
            },
            {
              sensorID: 1776,
              sensorTypeId: 1,
              routerId: 'K74054661',
              deviceSerial: 'K74054661',
              alias: '视频3',
              deviceName: '视频3',
              channelNo: null,
              control: null,
              lat: 29.972817840112462,
              hdAddress: null,
              liveAddress:
                'https://open.ys7.com/v3/openlive/K74054661_1_2.m3u8?expire=1712041799&id=622811359247077376&t=f7c6276d25c84cd68f8593e0fa4563b65500bfa8007872309928381dc885c91b&ev=100',
              rtmp: null,
              rtmpHd: null,
              status: null,
              beginTime: null,
              endTime: null,
              group: 0,
              exception: 0,
              long: 121.87085509300233,
              tian_di: true,
            },
            {
              sensorID: 1777,
              sensorTypeId: 1,
              routerId: 'K74054644',
              deviceSerial: 'K74054644',
              alias: '视频4',
              deviceName: '视频4',
              channelNo: null,
              control: null,
              lat: 29.97045699109075,
              hdAddress: null,
              liveAddress:
                'https://open.ys7.com/v3/openlive/K74054644_1_2.m3u8?expire=1712041799&id=622811360512147456&t=eb4a6f087fb793b5e8cf261b52e24011c4783dfd3c00fc430bed98cca4c41ed2&ev=100',
              rtmp: null,
              rtmpHd: null,
              status: null,
              beginTime: null,
              endTime: null,
              group: 0,
              exception: 0,
              long: 121.86965882778169,
              tian_di: true,
            },
            {
              sensorID: 1779,
              sensorTypeId: 1,
              routerId: 'K74054646',
              deviceSerial: 'K74054646',
              alias: '视频5',
              deviceName: '视频5',
              channelNo: null,
              control: null,
              lat: 29.973672418002245,
              hdAddress: null,
              liveAddress:
                'https://open.ys7.com/v3/openlive/K74054646_1_2.m3u8?expire=1712041799&id=622811361214214144&t=4f92f21defe1ea4545414aeb2bf9c7d39cf8e8b727e47bb825e07ef7ac16dc0e&ev=100',
              rtmp: null,
              rtmpHd: null,
              status: null,
              beginTime: null,
              endTime: null,
              group: 0,
              exception: 0,
              long: 121.86841428279878,
              tian_di: true,
            },
          ],
          ownerName: '视频',
          alias: 'video',
          sensorTypeId: 1,
        },
        {
          sensors: [
            {
              data: {
                data: '0.00',
                value: 0,
                timeStamp: '2024-03-13 16:44:58',
                time_stamp: 1710319498,
                civ: 0,
                router_id: '898604940121C1209190_d_d',
              },
              datas: null,
              info: {
                sensorID: 1260,
                sensorTypeId: 4,
                obsId: 932,
                alias: '雨量',
                unit: 'mm',
                alt: null,
                position: null,
                lat: 29.969778631929326,
                picture: null,
                stability: 0.1,
                projectName: null,
                projectId: 189,
                obsName: null,
                alarmLevel: 0,
                router_id: '1260',
                routerID: '898604940121C1209190_d_d',
                level_1: 150,
                level_2: 100,
                level_3: 50,
                level_4: 0,
                long: 121.86791002750398,
                tian_di: true,
                type: 'digital',
              },
            },
          ],
          ownerName: '降雨量',
          alias: 'rainfall',
          sensorTypeId: 4,
        },
      ],
    }
  },
  mounted() {
    const videoList = this.result.filter(ele => {
      return ele.alias === 'video'
    })

    console.log('videoList', videoList)

    const videos = videoList[0].sensors || []
    var urlList

    if (videos.length) {
      urlList = videos.filter(ele => {
        return ele.sensorID === 1298
      })
      console.log('urlList', urlList)
      if (urlList.length) {
        this.videoUrl = urlList[0].liveAddress
        console.log('this.videoUrl', this.videoUrl)
      }
    }
  },
  watch: {
    value(newVal) {
      this.getSource(newVal)
    },
  },
  methods: {
    getSource(value) {
      this.show = false
      axios.get(`./static/vueFile/${value}.vue`).then(res => {
        this.source = res.data
        this.show = true
      })
    },
  },
}
</script>

<style lang="scss">
#codeView {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  padding: 32px;
  z-index: 3;
  position: absolute;
  left: 20px;
  top: calc(#{$headerHeight} + 10px);
  width: 80vw;
  height: 90vh;
}
</style>
